<div class="mdc-dialog"
     role="alertdialog"
     aria-modal="true"
     aria-labelledby="my-dialog-title"
     aria-describedby="my-dialog-content">
  <div class="mdc-dialog__container">
    <div class="mdc-dialog__surface">
      <!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
      <h2 class="mdc-dialog__title" id="my-dialog-title"><!--
     -->Dialog Title<!--
   --></h2>
      <div class="mdc-dialog__content" id="my-dialog-content">
        Dialog body text goes here.
      </div>
      <footer class="mdc-dialog__actions">
        <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="no">
          <span class="mdc-button__label">No</span>
        </button>
        <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
          <span class="mdc-button__label">Yes</span>
        </button>
      </footer>
    </div>
  </div>
  <div class="mdc-dialog__scrim"></div>
</div>

NOTE: Titles cannot contain leading whitespace due to how mdc-typography-baseline-top() works.

Styles

@import "@material/dialog/mdc-dialog";

NOTE: Styles for any components you intend to include within dialogs (e.g. List, Checkboxes, etc.) must also be imported.

JavaScript Instantiation

import {MDCDialog} from '@material/dialog';
const dialog = new MDCDialog(document.querySelector('.mdc-dialog'));

See Importing the JS component for more information on how to import JavaScript.

MDC Dialog makes no assumptions about what will be added to the mdc-dialog__content element. Any List, Checkboxes, etc. must also be instantiated. If your dialog contains any layout-sensitive components, you should wait until MDCDialog:opened is emitted to instantiate them (or call layout on them) so that the dialog's transition finishes first.

For example, to instantiate an MDC List inside of a Simple or Confirmation Dialog:

import {MDCList} from '@material/list';
const list = new MDCList(document.querySelector('.mdc-dialog .mdc-list'));

dialog.listen('MDCDialog:opened', () => {
  list.layout();
});

NOTE: Mispositioned or incorrectly-sized elements (e.g. ripples, floating labels, notched outlines) are a strong indication that child components are being instantiated before the dialog has finished opening.

Variants

Simple Dialog

The Simple Dialog contains a list of potential actions. It does not contain buttons.

<div class="mdc-dialog"
     role="alertdialog"
     aria-modal="true"
     aria-labelledby="my-dialog-title"
     aria-describedby="my-dialog-content">
  <div class="mdc-dialog__container">
    <div class="mdc-dialog__surface">
      <!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
      <h2 class="mdc-dialog__title" id="my-dialog-title"><!--
     -->Choose a Ringtone<!--
   --></h2>
      <div class="mdc-dialog__content" id="my-dialog-content">
        <ul class="mdc-list mdc-list--avatar-list">
          <li class="mdc-list-item" tabindex="0" data-mdc-dialog-action="none">
            <span class="mdc-list-item__text">None</span>
          </li>
          <li class="mdc-list-item" data-mdc-dialog-action="callisto">
            <span class="mdc-list-item__text">Callisto</span>
          </li>
          <!-- ... -->
        </ul>
      </div>
    </div>
  </div>
  <div class="mdc-dialog__scrim"></div>
</div>

Note the inclusion of the mdc-list--avatar-list class, which aligns with the Simple Dialog spec.

Confirmation Dialog

The Confirmation Dialog contains a list of choices, and buttons to confirm or cancel. Choices are accompanied by radio buttons (indicating single selection) or checkboxes (indicating multiple selection).

<div class="mdc-dialog"
     role="alertdialog"
     aria-modal="true"
     aria-labelledby="my-dialog-title"
     aria-describedby="my-dialog-content">
  <div class="mdc-dialog__container">
    <div class="mdc-dialog__surface">
      <!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
      <h2 class="mdc-dialog__title" id="my-dialog-title"><!--
     -->Choose a Ringtone<!--
   --></h2>
      <div class="mdc-dialog__content" id="my-dialog-content">
        <ul class="mdc-list">
          <li class="mdc-list-item" tabindex="0">
            <span class="mdc-list-item__graphic">
              <div class="mdc-radio">
                <input class="mdc-radio__native-control"
                       type="radio"
                       id="test-dialog-baseline-confirmation-radio-1"
                       name="test-dialog-baseline-confirmation-radio-group"
                       checked>
                <div class="mdc-radio__background">
                  <div class="mdc-radio__outer-circle"></div>
                  <div class="mdc-radio__inner-circle"></div>
                </div>
              </div>
            </span>
            <label id="test-dialog-baseline-confirmation-radio-1-label"
                   for="test-dialog-baseline-confirmation-radio-1"
                   class="mdc-list-item__text">None</label>
          </li>
          <!-- ... -->
        </ul>
      </div>
      <footer class="mdc-dialog__actions">
        <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="close">
          <span class="mdc-button__label">Cancel</span>
        </button>
        <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="accept">
          <span class="mdc-button__label">OK</span>
        </button>
      </footer>
    </div>
  </div>
  <div class="mdc-dialog__scrim"></div>
</div>

NOTE: In the example above, the Cancel button intentionally has the close action to align with the behavior of clicking the scrim or pressing the Escape key, allowing all interactions involving dismissal without taking an action to be detected the same way.

Additional Information

Dialog Actions

All dialog variants support the concept of dialog actions. Any element within a dialog may include the data-mdc-dialog-action attribute to indicate that interacting with it should close the dialog with the specified action. This action is then reflected via event.detail.action in the MDCDialog:closing and MDCDialog:closed events.

Additionally, two interactions have defined actions by default:

Clicking on the scrim
Pressing the Escape key within the dialog

Both of these map to the close action by default. This can be accessed and customized via the component's scrimClickAction and escapeKeyAction properties, respectively.

Setting either of these properties to an empty string will result in that interaction being disabled (i.e. the dialog will no longer close in response to the interaction). Exercise caution when doing this - it should always be possible for a user to dismiss the dialog.

Any action buttons within the dialog which equate strictly to a dismissal with no further action should also use the close action; this will make it easy to handle all such interactions consistently, while separately handling other actions.

Action Button Arrangement

As indicated in the Dialog design article, buttons within the mdc-dialog__actions element are arranged horizontally by default, with the confirming action last.

In cases where the button text is too long for all buttons to fit on a single line, the buttons are stacked vertically, with the confirming action first.

MDC Dialog detects and handles this automatically by default, reversing the buttons when applying the stacked layout. This automatic behavior can be disabled by setting autoStackButtons to false on the component instance:

dialog.autoStackButtons = false;

This will also be disabled if the mdc-dialog--stacked modifier class is applied manually to the root element before the component is instantiated, but note that dialog action button labels are recommended to be short enough to fit on a single line if possible.

Default Action Button

MDC Dialog supports indicating that one of its action buttons represents the default action, triggered by pressing the Enter key. This can be used e.g. for single-choice Confirmation Dialogs to accelerate the process of making a selection, avoiding the need to tab through to the appropriate button to confirm the choice.

To indicate that a button represents the default action, add the data-mdc-dialog-button-default data attribute. For example:

...
<footer class="mdc-dialog__actions">
  <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="close">
    <span class="mdc-button__label">Cancel</span>
  </button>
  <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="accept" data-mdc-dialog-button-default>
    <span class="mdc-button__label">OK</span>
  </button>
</footer>
...

Actions and Selections

Dialogs which require making a choice via selection controls should initially disable any button which performs an action if no choice is selected by default. MDC Dialog does not include built-in logic for this, since it aims to remain as unopinionated as possible regarding dialog contents, aside from relaying information on which action is taken.

Accessibility

Using `aria-hidden` as a fallback for `aria-modal`

aria-modal is part of the ARIA 1.1 specification, and indicates to screen readers that they should confine themselves to a single element. MDC Dialog recommends adding aria-modal="true" to the root element of its DOM structure; however, not all user agents and screen readers properly honor this attribute.

The fallback is to apply aria-hidden="true" to all static content behind the dialog, when the dialog is open. This will be easiest to achieve if all non-modal elements are under a single common ancestor under the body, so that aria-hidden can be applied to one element.

dialog.listen('MDCDialog:opened', function() {
  // Assuming contentElement references a common parent element with the rest of the page's content
  contentElement.setAttribute('aria-hidden', 'true');
});

dialog.listen('MDCDialog:closing', function() {
  contentElement.removeAttribute('aria-hidden');
});

Note: The example above intentionally listens to the opened (not opening) event and the closing (not closed) event in order to avoid additional jumping between elements by screen readers due to one element becoming hidden before others become visible.

Style Customization

CSS Classes

CSS Class	Description
`mdc-dialog`	Mandatory. The root DOM element containing the surface and the container.
`mdc-dialog__scrim`	Mandatory. Semitransparent backdrop that displays behind a dialog.
`mdc-dialog__container`	Mandatory. Wrapper element needed to ensure flexbox behavior in IE 11.
`mdc-dialog__surface`	Mandatory. The bounding box for the dialog's content.
`mdc-dialog__title`	Optional. Brief summary of the dialog's purpose.
`mdc-dialog__content`	Optional. Primary content area. May contain a list, a form, or prose.
`mdc-dialog__actions`	Optional. Footer area containing the dialog's action buttons.
`mdc-dialog__button`	Optional. Individual action button. Typically paired with `mdc-button`.
`mdc-dialog--open`	Optional. Indicates that the dialog is open and visible.
`mdc-dialog--opening`	Optional. Applied automatically when the dialog is in the process of animating open.
`mdc-dialog--closing`	Optional. Applied automatically when the dialog is in the process of animating closed.
`mdc-dialog--scrollable`	Optional. Applied automatically when the dialog has overflowing content to warrant scrolling.
`mdc-dialog--stacked`	Optional. Applied automatically when the dialog's action buttons can't fit on a single line and must be stacked.

Sass Mixins

Mixin	Description
`mdc-dialog-container-fill-color($color)`	Sets the fill color of the dialog.
`mdc-dialog-scrim-color($color, $opacity)`	Sets the color of the scrim behind the dialog.
`mdc-dialog-title-ink-color($color, $opacity)`	Sets the color of the dialog's title text.
`mdc-dialog-content-ink-color($color, $opacity)`	Sets the color of the dialog's content text.
`mdc-dialog-scroll-divider-color($color, $opacity)`	Sets the color of the dividers which display around scrollable content.
`mdc-dialog-shape-radius($radius, $rtl-reflexive)`	Sets the rounded shape to dialog surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
`mdc-dialog-min-width($min-width)`	Sets the minimum width of the dialog (defaults to 280px).
`mdc-dialog-max-width($max-width, $margin)`	Sets the maximum width of the dialog (defaults to 560px max width and 16px margins).
`mdc-dialog-max-height($max-height, $margin)`	Sets the maximum height of the dialog (defaults to no max height and 16px margins).

NOTE: The max-width and max-height mixins only apply their maximum when the viewport is large enough to accommodate the specified value when accounting for the specified margin on either side. When the viewport is smaller, the dialog is sized such that the given margin is retained around the edges.

Other Customizations

Data Attributes	Description
`data-mdc-dialog-button-default`	Optional. Add to a button to indicate that it is the default action button (see Default Action Button section above).
`data-mdc-dialog-initial-focus`	Optional. Add to an element to indicate that it is the element to initially focus on after the dialog has opened.

`MDCDialog` Properties and Methods

Property	Value Type	Description
`isOpen`	`boolean` (read-only)	Proxies to the foundation's `isOpen` method.
`escapeKeyAction`	`string`	Proxies to the foundation's `getEscapeKeyAction` and `setEscapeKeyAction` methods.
`scrimClickAction`	`string`	Proxies to the foundation's `getScrimClickAction` and `setScrimClickAction` methods.
`autoStackButtons`	`boolean`	Proxies to the foundation's `getAutoStackButtons` and `setAutoStackButtons` methods.

Method Signature	Description
`layout() => void`	Recalculates layout and automatically adds/removes modifier classes like `--scrollable`.
`open() => void`	Opens the dialog.
`close(action: string?) => void`	Closes the dialog, optionally with the specified action indicating why it was closed.

Events

Event Name	`event.detail`	Description
`MDCDialog:opening`	`{}`	Indicates when the dialog begins its opening animation.
`MDCDialog:opened`	`{}`	Indicates when the dialog finishes its opening animation.
`MDCDialog:closing`	`{action: string?}`	Indicates when the dialog begins its closing animation. `action` represents the action which closed the dialog.
`MDCDialog:closed`	`{action: string?}`	Indicates when the dialog finishes its closing animation. `action` represents the action which closed the dialog.

Usage within Web Frameworks

If you are using a JavaScript framework, such as React or Angular, you can create a Dialog for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.

`MDCDialogAdapter`

Method Signature	Description
`addClass(className: string) => void`	Adds a class to the root element.
`removeClass(className: string) => void`	Removes a class from the root element.
`hasClass(className: string) => boolean`	Returns whether the given class exists on the root element.
`addBodyClass(className: string) => void`	Adds a class to the `<body>`.
`removeBodyClass(className: string) => void`	Removes a class from the `<body>`.
`eventTargetMatches(target: EventTarget	null, selector: string) => void`
`trapFocus(initialFocusEl: HTMLElement	null) => void`
`releaseFocus() => void`	Removes any effects of focus trapping on the dialog surface (see Handling Focus Trapping below for more details).
`getInitialFocusEl() => HTMLElement	null`
`isContentScrollable() => boolean`	Returns `true` if `mdc-dialog__content` can be scrolled by the user, otherwise `false`.
`areButtonsStacked() => boolean`	Returns `true` if `mdc-dialog__action` buttons (`mdc-dialog__button`) are stacked vertically, otherwise `false` if they are side-by-side.
`getActionFromEvent(event: Event) => string \| null`	Retrieves the value of the `data-mdc-dialog-action` attribute from the given event's target, or an ancestor of the target.
`clickDefaultButton() => void`	Invokes `click()` on the `data-mdc-dialog-button-default` element, if one exists in the dialog.
`reverseButtons() => void`	Reverses the order of action buttons in the `mdc-dialog__actions` element. Used when switching between stacked and unstacked button layouts.
`notifyOpening() => void`	Broadcasts an event denoting that the dialog has just started to open.
`notifyOpened() => void`	Broadcasts an event denoting that the dialog has finished opening.
`notifyClosing(action: string) {}`	Broadcasts an event denoting that the dialog has just started closing. If a non-empty `action` is passed, the event's `detail` object should include its value in the `action` property.
`notifyClosed(action: string) {}`	Broadcasts an event denoting that the dialog has finished closing. If a non-empty `action` is passed, the event's `detail` object should include its value in the `action` property.

`MDCDialogFoundation`

Method Signature	Description
`open()`	Opens the dialog.
`close(action: string)`	Closes the dialog, optionally with the specified action indicating why it was closed.
`isOpen() => boolean`	Returns whether the dialog is open.
`layout()`	Recalculates layout and automatically adds/removes modifier classes e.g. `--scrollable`.
`getEscapeKeyAction() => string`	Returns the action reflected when the Escape key is pressed.
`setEscapeKeyAction(action: string)`	Sets the action reflected when the Escape key is pressed. Setting to `''` disables closing the dialog via Escape key.
`getScrimClickAction() => string`	Returns the action reflected when the scrim is clicked.
`setScrimClickAction(action: string)`	Sets the action reflected when the scrim is clicked. Setting to `''` disables closing the dialog via scrim click.
`getAutoStackButtons() => boolean`	Returns whether stacked/unstacked action button layout is automatically handled during layout logic.
`setAutoStackButtons(autoStack: boolean) => void`	Sets whether stacked/unstacked action button layout is automatically handled during layout logic.
`handleClick(event: MouseEvent)`	Handles `click` events on or within the dialog's root element.
`handleKeydown(event: KeyboardEvent)`	Handles `keydown` events on or within the dialog's root element.
`handleDocumentKeydown(event: Event)`	Handles `keydown` events on or within the document while the dialog is open.

Event Handlers

When wrapping the Dialog foundation, the following events must be bound to the indicated foundation methods:

Event	Target	Foundation Handler	Register	Deregister
`click`	`.mdc-dialog` (root)	`handleClick`	During initialization	During destruction
`keydown`	`.mdc-dialog` (root)	`handleKeydown`	During initialization	During destruction
`keydown`	`document`	`handleDocumentKeydown`	On `MDCDialog:opening`	On `MDCDialog:closing`
`resize`	`window`	`layout`	On `MDCDialog:opening`	On `MDCDialog:closing`
`orientationchange`	`window`	`layout`	On `MDCDialog:opening`	On `MDCDialog:closing`

The Util API

External frameworks and libraries can use the following utility methods from the util module when implementing their own component.

Method Signature	Description
`createFocusTrapInstance(surfaceEl: Element, focusTrapFactory: function(): !FocusTrap, initialFocusEl: ?Element) => !FocusTrap`	Creates a properly configured focus-trap instance.
`isScrollable(el: Element \| null) => boolean`	Determines if the given element is scrollable.
`areTopsMisaligned(els: Element[]) => boolean`	Determines if two or more of the given elements have different `offsetTop` values.

Handling Focus Trapping

In order for dialogs to be fully accessible, they must conform to the guidelines outlined in:

The main implication of these guidelines is that the only focusable elements are those contained within a dialog surface.

Trapping focus correctly for a modal dialog requires a complex set of events and interaction patterns that we feel is best not duplicated within the logic of this component. Furthermore, frameworks and libraries may have their own ways of trapping focus that framework authors may want to make use of. For this reason, we have two methods on the adapter that should be used to handle focus trapping:

trapFocus() is called when the dialog is open and should set up focus trapping adhering to the ARIA practices in the link above.
releaseFocus() is called when the dialog is closed and should tear down any focus trapping set up when the dialog was open.

The MDCDialog component uses the focus-trap package to handle this. You can use util.createFocusTrapInstance() (see below) to easily create a focus trapping solution for your component code.

NOTE: iOS platform doesn't seem to register currently focused element via document.activeElement which causes releasing focus to last focused element fail.

`createFocusTrapInstance()`

const {activate, deactivate} =
  util.createFocusTrapInstance(surfaceEl, focusTrapFactory, initialFocusEl);

Given a dialog surface element an optional focusTrap factory function, and an optional initial element to focus, such that:

The focus is trapped within the surfaceEl
The initialFocusEl receives focus when the focus trap is activated
- If omitted, defaults to the first focusable element in surfaceEl
Closing the dialog in any way (including pressing Escape or clicking outside the dialog) deactivates focus trapping
Focus is returned to the previously focused element before the focus trap was activated

This focus trap instance can be used to implement the trapFocus and releaseFocus adapter methods by calling instance.activate() and instance.deactivate() respectively within those methods.

The focusTrapFactory can be used to override the focus-trap function used to create the focus trap. Its API is the same as focus-trap's createFocusTrap (which is what it defaults to). You can pass in a custom function for mocking out the actual function within tests, or to modify the arguments passed to the function before it's called.

4.0.0 (2019-11-02)

Bug Fixes

button: Add overflow: visible to button. (#4973) (905e84e)
button: Adjust touch target size when density is applied (#5112) (e2506f4)
checkbox: Change minimum ripple size of checkbox & switch 24px => 28px (#5140) (3eae309)
checkbox: Fix checkbox terminology in sass mixins (#5014) (2161c02)
checkbox: Remove RTL styles from checkbox ripple (#5134) (a646516)
chips: Ignore selection events in chip set (#4878) (94c6a00)
chips: Remove keyCode check (#4966) (e6304c4)
chips: Reset touch target when chip density mixin is applied. (#5116) (d3b515e)
chips: Stack trailing/leading icons above touch target el (#5040) (048d4b7)
chips: Stop emitting events in handlers (#4969) (cfd81dc)
data-table: Minor fixes for data table layout (#5037) (37b1f93)
fab: Add overflow: hidden; to ripple target to fix bounded ripple. (#5214) (97cbbdc)
fab: Use FAB ripple target selector (#5146) (9d91acc)
form-field: Fix radio RTL alignment bug. (#5064) (ef99808)
linear-progress: Fix indeterminate animation bug (#5180) (062ade5)
linear-progress: Prefix animation keyframes to prevent clashing (#5155) (fc0e474)
linear-progress: Restore buffer after determinate is toggl… (#5156) (09b1598)
linear-progress: Support high contrast mode (#5190) (d4141c9)
list: Add #adapter.listItemAtIndexHasClass to prevent user state change to disabled items (#4922) (b6d213c)
menu: Vertically center the group icon (#4862) (c5738ed)
menu-surface: remove duplicate export from menu-surface (#5200) (0b120ae)
radio: Fix touch target margins: 0px => 4px. (#5096) (a48d06e)
ripple: Add overflow: hidden; to the bounded ripple mixin (#5173) (996b091)
ripple: Always set even num when initial ripple size is ca… (#5141) (b26ad23)
ripple: Remove unnecessary overflow: hidden. (#5191) (5916d18)
tabs: Fix tab img icon styling. (#5041) (d0e6cd1)
text-field: Do not trigger shake animation when text field is empty (#5097) (4913db9)
text-field: Fixes input text alignment on IE11 for densed text field (#5136) (892dd4e)
text-field: Fixes input text alignment on IE11 for densed… (#5147) (c8f7693)
text-field: Updated shape mixins to set density scale (#5207) (719b57e)
touch-target: Add class to touch target wrapper. (#5174) (e7799b8)
touch-target: Add missing dependency - touch target to com… (#5098) (9306bd0)

Code Refactoring

button: Add ripple target as an inner element. (#4890) (dffefe6)
mdc-fab: Move Ripple to inner Element. (#4997) (85b33b5)
select: Refactor select (#5113) (db7560e)
slider: Functional slider tick visuals with css background (#4756) (8f851d9)

Features

button: Add support for increased touch target to button. (#4948) (1d7a2e6)
checkbox: Add disabled state color mixins (#5167) (01628ef)
checkbox: Add support for 48px touch target (#5025) (b5685a8)
checkbox: Move ripple to child node (#4981) (9712b24)
chip: Add density mixin to chip. (#5109) (bdf3430)
chips: Add keyboard navigation (#4844) (42065fe), closes #2259
chips: Add setSelectedFromChipset method (#4872) (283bd55)
chips: Add support for increased touch target to chips. (#4970) (6aa109d)
chips: Use index for all chip operations (#4869) (07078bb)
density: Add density subsystem to components (#5059) (73a5e4c)
dialog: Add dialog mixin for dialogs with increased touch target buttons. (#5024) (2ef1ddd)
icon-button: Add density mixin to icon button (#5122) (37d6458)
list: Add density mixin to list (#5069) (5132f89)
list: Add mixin for disabled text opacity (#4861) (d68f8a7)
radio: Add density mixin to radio (#5118) (199534d)
radio: Add disabled state color mixins (#5168) (b5c6d66)
radio: Add support for 48px touch target (#5032) (87b0a4c)
radio: Move ripple to child element (#4983) (100ab37)
ripple: Add support for ripple target to mixins. (#4880) (08dbe69)
snackbar: Add option for indefinite timeout (#4998) (4f11851)
switch: Add density support for switch component. (#5124) (2c793b4), closes #5104
switch: add ripple opacity customization mixins (#5126) (8c0273f)
tab: Add text transform mixin (#5144) (22d7ad2)
tab-bar: Add a mixin to set scroller animation (#5172) (d7c938a)
tab-bar: Add density mixin to tab-bar (#5070) (45dc002)
tab-scroller: Add incrementScrollImmediate to bypass animation (#5184) (2b878b3), closes #5123
tab-scroller: Mixin for scroll transition (#5154) (efda83d)
text-field: Add density mixin to text field variants (#5066) (a12101d)
text-field: Center align inner elements for dynamic height (#4990) (4d94b22)
touch-target: Add touch target mixins. (#4940) (b2e0fea)

BREAKING CHANGES

checkbox: mdc-checkbox-ink-color mixin now only applies to enabled checkboxes
chips: Chips markup, adapters, foundations, and events have changed.
select: In MDCMenu and MDCMenuSurface, hoistMenuToBody adapter method removed. In MDCSelect, HTML structure changed: the select anchor is now wrapped in a parent element, and the anchor's sibling is the select menu. Support for native select removed. Support added for select with no label. MDCSelectAdapter methods removed: getValue, setValue, isMenuOpen, setSelectedIndex, checkValidity, setValid, toggleClassAtIndex. MDCSelectAdapter methods added: hasLabel, getSelectedMenuItem, setSelectedText, isSelectedTextFocused, get/setSelectedTextAttr, getAnchorElement, setMenuAnchorElement, setMenuAnchorCorner, setMenuWrapFocus, set/removeAttributeAtIndex, focusMenuItemAtIndex, getMenuItemValues, getMenuItemCount, getMenuItemCount, getMenuItemAttr, getMenuItemTextAtIndex, add/removeClassAtIndex. MDCSelectFoundation setValue method removed; getDisabled, handleMenuItemAction, getSelectedIndex, get/setRequired, init added.
radio: In Checkbox, Renamed sass variables $mdc-radio-touch-area => $mdc-radio-ripple-size & $mdc-radio-ui-size => $mdc-radio-icon-size to be consistent with checkbox. Also, removed $mdc-radio-ui-pct sass variable.
switch: Renames switch variables $mdc-switch-tap-target-size => $mdc-switch-ripple-size, removes $mdc-switch-tap-target-initial-position and $mdc-switch-native-control-width.
list: New adapter method listItemAtIndexHasClass
list: Renamed mixin mdc-list-item-shape-radius() => mdc-list-single-line-shape-radius()
linear-progress: MDCLinearProgressAdapter adapter has new forceLayout method
text-field: Removed sass variable in notched outline - $mdc-notched-outline-transition-duration.

mdc-fab: This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.

OLD

<button class="mdc-fab" aria-label="Favorite">
  <span class="mdc-fab__icon material-icons">favorite</span>
</button>

NEW

<button class="mdc-fab" aria-label="Favorite">
  <div class="mdc-fab__ripple"></div>
  <span class="mdc-fab__icon material-icons">favorite</span>
</button>

radio: Ripple has been moved to a child element. See readme for updates.
slider: remove adapter methods appendTrackMarkers, removeTrackMarkers , setLastTrackMarkersStyleProperty , and add adapter method setTrackMarkers.

button: This changes the structure of the button element by moving the ripple from the outer <button> element to an inner mdc-button__ripple element.

OLD

<button class="mdc-button">
  <span class="mdc-button__label">Hello World</span>
</button>

NEW

<button class="mdc-button">
  <div class="mdc-button__ripple"></div>
  <span class="mdc-button__label">Hello World</span>
</button>

chips: MDCChipSetAdapter#removeChip has been replaced with MDCChipSetAdapter#removeChipAtIndex. MDCChipSetAdapter#setSelected has been replaced with MDCChipSetAdapter#selectChipAtIndex
density: Renamed sass mixins & variables in MDC Data Table - mdc-data-table-header-row-height => mdc-data-table-header-cell-height & mdc-data-table-row-height => mdc-data-table-cell-height. Also removed mdc-button--dense variant, use button's density mixin instead.

Note: For older changes, see the changelog archive.

Keywords

FAQs

What is @material/dialog?

Is @material/dialog popular?

Is @material/dialog well maintained?

Package last updated on 12 Sep 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@material/dialog

Dialog

Design & API Documentation

Installation

Basic Usage

HTML Structure